<template>
  <div class="container" id='container' >
    <div class="page">
      <ul id="scene">
        <li class="layer img01" data-depth="0.80"><img src="../../assets/apply/img/img01.png"></li>
        <li class="layer" data-depth="0.60"><img src="../../assets/apply/img/img02.png"></li>
        <li class="layer" data-depth="0.40"><img src="../../assets/apply/img/img03.png"></li>
        <li class="layer" data-depth="0.20"><img src="../../assets/apply/img/img04.png"></li>
        <li class="layer" data-depth="0.00"><img src="../../assets/apply/img/img05.png"></li>
      </ul>
      <div class="gotobottom"  @click="scrollToBottom"></div>
      <section class="u-arrow-bottom" style="bottom: 20px;">
        <div class="pre-wrap-bottom">
            <div class="pre-box1">
              <div class="pre1"></div>
            </div>
            <div class="pre-box2">
              <div class="pre2"></div>
            </div>
        </div>
      </section>
    </div>
    <div class="img2-bg"></div>
    <div class="img-list">
      <img class="itemImg" src="../../assets/apply/img3.png" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img04.png')" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img05.png')" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img06.png')" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img07.png')" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img08.png')" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img09.png')" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img010.png')" alt="">
      <img class="itemImg"  v-lazy="require('../../assets/apply/img011.png')" alt="">
    </div>
    <div class="zindex">
      <!-- <div class="head-bg"></div> -->
      <div class="main">
        <div class="fillIn">填写资料</div>
        <div class="infuse">注：为了便于审核，需要您如实填写相关资料</div>
        <div class="form">
          <div class="input-box">
            <p class="input-title">姓名</p>
            <input  type="text" placeholder="请输入您的姓名" v-model="userName" >
          </div>
          <div class="input-box">
            <p class="input-title">手机号</p>
            <input  type="number" placeholder="请输入您的手机号码" v-model="phone" >
          </div>
          <!-- <div class="input-box">
            <p class="input-title">身份证</p>
            <input  type="text" placeholder="请输入您的身份证号码" v-model="userId" >
          </div> -->
          <div class="input-box" @click="areaClick" >
            <p class="input-title">所在区域</p>
            <div class="address">
              {{address}}
            </div>
          </div>
          <div class="Submit" @click="Submit">报名</div>
          <div class="hint">
            <!-- <p style="color:#00b4ff;">30日全天报道，下午试驾体验&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7月1日上午，首发盛会</p> -->
            <p>本次盛会采用邀约制和预约制，预约席位仅限100席，</p>
            <p>立刻报名，马上开抢</p>
            <p>仅限本人预约，预约成功将以短信形式通知。</p>
            <!-- <p>同行参会人员需要另行填写参会信息报名</p> -->
          </div>
        </div>
      </div>
    </div>
      <!-- 地址选择弹出框 -->
      <van-actionsheet
        v-model="areaShow">
        <van-area :area-list="areaList" @cancel="cancelArea" :columns-num="2" @confirm="onSelectArea"/>
      </van-actionsheet>

      <div id="audio_btn" :class="{ 'rotate': rotate }" @click="audio_btn">
          <audio loop src="../../assets/Victory.mp3" id="media"  autoplay preload></audio>
      </div>
  </div>
</template>

<script>
import { Actionsheet,Toast, Area, Dialog,} from 'vant'
import areaList from '../../utils/area.js'
import '../../utils/Parallax.js'
import share from '../../utils/share.js'
// console.log(share.getWeixincofig)
export default {
  components:{
    [Actionsheet.name]:Actionsheet,
    [Toast.name]:Toast,
    [Area.name]:Area,
    [Dialog.name]:Dialog,
  },
  data(){
    return{
      token:'',
      userName:'',
      phone:'',
      userId:'',
      address:"请选择区域 >",
      areaCode:'',
      areaShow:false,
      areaList,
      rotate:false,
      shareImg:require('../../assets/apply/img/share.png')
    }
  },
  mounted(){
    Toast.loading({duration:1000,mask: false,message: '加载中...'});
    let _this = this;
    var scene = document.getElementById('scene');
    var parallax = new Parallax(scene);

    document.addEventListener("WeixinJSBridgeReady", function () {
      var myVid=document.getElementById("media");
      myVid.autoplay=true;
      myVid.load();
      _this.rotate = true
    }, false);

    var stateObject = {} //这个空就行可以忽略
    var title = '' //标题这个可以忽略
    var newUrl = '' //重点是这个，这个参数是存改变过后的url
    if (location.href.indexOf('?') == '-1') {
      newUrl = window.location.href
    } else {
      newUrl = encodeURI(location.href.split('?')[0] + '#' + location.href.split('#')[1])
    }
    history.pushState(stateObject, title, newUrl)  //这一句代码是把newUrl重新赋予给url地址

    let timestamp = parseInt(new Date().getTime()/1000);
    let url= window.location.href;
    console.log(url)
    let root = process.env.VUE_APP_MAIN;
    console.log(root)
    share.getWeixincofig({
      timestamp,
      url,
      title:'九银.KING全球首发盛典预约报名表',
      desc:'九银.KING全球首发盛典预约报名表',
      link:url,
      imgUrl:root+_this.shareImg
    })


  },
  methods:{
    audio_btn(){
      var x = document.getElementById("media");
      if(this.rotate){
          x.pause();

          this.rotate=false;
         }else{
          x.play();

          this.rotate=true;
         }
    },
    scrollToBottom(){
      document.documentElement.scrollTop = 10000
      document.body.scrollTop = 10000
    },
       // 城市弹窗
    areaClick(type){
      console.log(123)
      this.type = type;
      this.areaShow =!this.areaShow;
    },
    cancelArea(){
      this.areaShow =!this.areaShow;
      setTimeout(()=>{
        document.documentElement.scrollTop = 10000
        document.body.scrollTop = 10000
      },50)
    },
        // 城市选择
    onSelectArea(item){
      console.log(item)
      this.areaShow =!this.areaShow;
      this.areaCode = item[1].code;
      this.address = `${item[0].name} ${item[1].name}`;
      // this.dwellProvince = item[0].code //省
      // this.dwellCity = item[1].code //市
      // this.dwellCounty = item[2].code //区
      setTimeout(()=>{
        document.documentElement.scrollTop = 10000
        document.body.scrollTop = 10000
      },50)
    },
    Submit(){
      let _this = this;
      let pat = /^1\d{10}$/;
      if(!this.userName){
        Toast('请输入您的姓名');
        return;
      }
      // if(!this.userId){
      //   Toast('请输入您的身份证');
      //   return;
      // }
      if(!this.phone){
        Toast('请输入您的手机号');
        return;
      }
      if(!pat.test(this.phone)){
        Toast('请输入有效的手机号码');
        return false
      }
      if(this.address=='请选择区域 >'){
        Toast('请完善您的所在区域');
        return;
      }
      Toast.loading({message: '加载中...'});
      let data =`?exhId=1&name=${this.userName}&phone=${this.phone}&idCardNo=1&areaCode=${this.areaCode}`
      this.$api.post('/exh/v1/appointment'+data,{
        // "exhId": 1,
        // "name": this.userName,
        // "phone": this.phone,
        // "idCardNo":this.userId,
        // "areaCode": this.areaCode,
      },s=>{
        console.log(s)
        Toast.clear();
        Toast('预约成功');
        _this.userName = '';
        _this.phone='';
        _this.address="请选择区域 >";
        _this.areaCode='';
      },f=>{
          Toast(f.errorMessage);
      },{
        'Content-Type': 'application/x-www-form-urlencoded',
        'Accept': "*/*"
      })
    }
  }
}
</script>

<style>
  .titleWidth{
    width:90px;
    flex:none;
  }
</style>

<style scoped lang="scss">

.container{
  // flex:1;
  // overflow: hidden;
  width: 100%;
  height:100%;
  text-align: left;
  background:#000;
}
.page{
  position:relative;
  z-index:200;
  width:100%;
  // height:100%;
  background:#000;
}
#scene{
  position: relative;
  z-index:200;
  width:100%;
 height:100%;
}
#scene{
  overflow: hidden;
  width:100%;
  height:100%;
}
#scene li{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}
#scene img{
  width:100%;
  // height:100%;
}
// #scene li.img01{
//   left:-35px;
//   top:0%;
//   width:450px;
//   height:100%;
// }
.fillIn{
  margin-top:35px;
  font-size:22px;
  line-height:37px;
  font-weight: 500;
  text-align: center;
  color:#fff;
}
.infuse{
  font-size:12px;
  text-align: center;
  color:#f00;
}
.img2-bg{
  position:fixed;
  left:0;
  top:0;
  width:375px;
  // height:656px;
  height: 100%;
  background: url("../../assets/apply/img2.png") no-repeat;
  background-size:100% 100%;
}
.img-list,.zindex{
  position: relative;
  z-index:100;
}
.img-list img{
  width:100%;
}
// .head-bg{
//   width:100%;
//   height:273px;
//   background: url("../../assets/apply/apply-bg.png") no-repeat;
//   background-size:100% 100%;
// }
.main{
  overflow: hidden;
  // width:375px;
  width:100%;
  height:604px;
  background: url("../../assets/apply/img0.png") no-repeat;
  background-size:100% 100%;
}
.hint{
  text-align:center;
  font-size:12px;
  line-height: 20px;
  color:#747474;
}
.form{
  width:90%;
  margin:0 auto;
  margin-top:38px;
}
.input-box{
  display:flex;
  flex-direction: row;
  width:100%;
  height:60px;
  border-bottom:1px solid rgba(255,255,255,0.1);
}
.input-title{
  width:100px;
  line-height: 60px;
  font-size:13px;
  color:#4d5575;
}
.input-box input,.address{
  flex:1;
  height:60px;
  line-height: 60px;
  text-align: right;
  font-size:13px;
  border:none;
  background:none;
  color:#fff;
}
.Submit{
  width:100%;
  height:48px;
  margin:20px 0;
  text-align: center;
  line-height: 48px;
  border-radius: 12px;
  font-size:17px;
  font-weight:500;
  background: #ffc400;

  color:#333;
}


.u-arrow-bottom {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 550;
    width: 24px;
    height: 14px;
    margin-left: -7px;
}
.pre-wrap-bottom {
    width: 24px;
    height: 14px;
    position: relative;
    -webkit-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out;
}
.pre-box1, .pre-box2 {
    height: 15px;
    width: 11px;
    position: absolute;
    top: -5px;
    overflow: hidden;
}
.pre-box2 {
    left: 10px;
}
@-webkit-keyframes start{
  0%,30%{opacity:0;transform:translateY(10px)}
  60%{opacity:1;transform:translate(0)}
  to{opacity:0;transform:translateY(-8px)}
}
.pre1, .pre2 {
    background-color: #fff;
    width: 14px;
    height: 5px;
    border-radius: 2px;
    position: absolute;
    box-shadow: 1px -1px 1px #646464;
    top: 5px;
}
.pre1 {
    transform: rotate(130deg);
    -webkit-transform: rotate(130deg);
    left: 1px;
}
.pre2 {
    left: -4.5px;
    -webkit-transform: rotate(50deg);
    transform: rotate(50deg);
}
.gotobottom{
  position: absolute;
  bottom:80px;
  left:50%;
  margin-left:-60px;
  width:120px;
  height:50px;
  z-index:201;
  // background:#ccc;
}



#audio_btn {
  position:absolute;
  right:20px;
  top:20px;
  z-index:250;
     width: 30px;
     height: 30px;
     background-image: url(../../assets/apply/bgmBtn-fbd2dc.svg);
  // background:#fff;
     background-size: contain;
 }

 .rotate {
    -webkit-animation: rotating 2.2s linear infinite;
     -moz-animation: rotating 2.2s linear infinite;
     -o-animation: rotating 2.2s linear infinite;
     animation: rotating 2.2s linear infinite
 }

 @-webkit-keyframes rotating {
     from { -webkit-transform: rotate(0) }
     to { -webkit-transform: rotate(360deg) }
 }

 @keyframes rotating {
     from { transform: rotate(0) }
     to { transform: rotate(360deg) }
 }
 @-moz-keyframes rotating {
     from { -moz-transform: rotate(0) }
     to { -moz-transform: rotate(360deg) }
 }
</style>